<template>
  <div class="Phone_list">
    <!-- <div class="header_title">
          <span>话机列表</span>
    </div>-->
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline"
      size="mini"
      style="marginTop:20px"
    >
      <el-form-item label="设备编号:" label-width="70px">
        <el-input v-model="sbnumber" placeholder="名称" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="tosearch()" size="mini">查询</el-button>
      </el-form-item>
      <el-form-item v-if="UnitTypeName=='系统单位'||UnitTypeName=='代理商'?true:false">
        <el-button type="primary" size="mini" @click="handleAddclick">添加新设备</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :close-on-click-modal="false"
      :data="tableinformation"
      v-loading="dataListLoading"
      style="width:100%"
      border="border"
      :header-cell-style="headFirst"
      highlight-current-row
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column prop="terminalCode" label="设备编号"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="calledPhoneNumber" label="当前被呼叫电话号码" v-if="tablelist"></el-table-column>
      <el-table-column prop="cardNumber" label="当前正在通话的卡号" v-if="tablelist"></el-table-column>
      <el-table-column prop="personInCharge" label="负责人"></el-table-column>
      <el-table-column prop="contactNumber" label="负责人电话"></el-table-column>
      <el-table-column prop="heartbeatTime" width="180%" label="上次通话时间"></el-table-column>
      <el-table-column prop="givingMinutes" label="赠送时间(分钟)"></el-table-column>
      <el-table-column prop="position" label="安装位置"></el-table-column>
      <el-table-column
        v-if="UnitTypeName=='系统单位'||UnitTypeName=='代理商'?true:false"
        prop="sipName"
        label="sip账户"
      ></el-table-column>
      <el-table-column
        v-if="UnitTypeName=='系统单位'||UnitTypeName=='代理商'?true:false"
        prop="sipPwd"
        label="sip密码"
      ></el-table-column>
      <el-table-column
        label="操作"
        width="130%"
        v-if="UnitTypeName=='系统单位'||UnitTypeName=='代理商'?true:false"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-edit"
            @click="showEditUserForm(scope.row)"
          ></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteUser(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
    <!-- 添加新设备 -->
    <el-dialog
      class="addsb"
      width="500px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="添加新设备"
      :close-on-click-modal="false"
      :visible.sync="addDialogFormVisible"
    >
      <el-form :model="addataForm" ref="addRef" :rules="myrules" label-width="100px">
        <el-form-item label="设备编号" prop="terminalCode">
          <el-col :span="18">
            <el-input v-model="addataForm.terminalCode" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-col :span="18">
            <el-input v-model="addataForm.name" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="赠送时间" prop="givingMinutes">
          <el-col :span="18">
            <el-input v-model="addataForm.givingMinutes" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人" prop="personInCharge">
          <el-col :span="18">
            <el-input v-model="addataForm.personInCharge" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人电话" prop="contactNumber">
          <el-col :span="18">
            <el-input v-model="addataForm.contactNumber" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="安装位置" prop="position">
          <el-col :span="18">
            <el-input v-model="addataForm.position" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="sip账号" prop="sipName">
          <el-col :span="18">
            <el-input v-model="addataForm.sipName" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="sip密码" prop="sipPwd">
          <el-col :span="18">
            <el-input v-model="addataForm.sipPwd" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible ()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑设备 -->
    <el-dialog
      class="addsb"
      width="500px"
      custom-class="customWidth"
      center
      :before-close="eidtcloseDialog"
      title="编辑设备"
      :close-on-click-modal="false"
      :visible.sync="eidtDialogFormVisible"
    >
      <el-form :model="eidtForm" ref="eidtRef" :rules="myrules" label-width="100px">
        <el-form-item label="设备编号" prop="terminalCode">
          <el-col :span="18">
            <el-input v-model.number="eidtForm.terminalCode" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-col :span="18">
            <el-input v-model="eidtForm.name" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人" prop="personInCharge">
          <el-col :span="18">
            <el-input v-model="eidtForm.personInCharge" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人电话" prop="contactNumber">
          <el-col :span="18">
            <el-input v-model="eidtForm.contactNumber" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="安装位置" prop="position">
          <el-col :span="18">
            <el-input v-model="eidtForm.position" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="sip账号" prop="sipName">
          <el-col :span="18">
            <el-input v-model="eidtForm.sipName" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="sip密码" prop="sipPwd">
          <el-col :span="18">
            <el-input v-model="eidtForm.sipPwd" autocomplete="off" size="mini"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="eidtvisible ()">取消</el-button>
        <el-button type="primary" @click="eidtFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      sbnumber: '',
      dataListLoading: false,
      //学校id
      schoolid: '',
      //学校列表
      schooloptions: [],
      //搜索条件
      searchInfo: {},
      //待定列表
      tablelist: false,
      //总条数
      recordCount: 0,
      //当前页数
      pageNum: 1,
      //页面显示信息条数
      pageSize: 10,
      //总页数
      pageCount: 0,
      currentPage: 1,
      startyear: '',
      startmonth: '',
      //设备监控所有信息
      tableinformation: [],
      //权限判断
      UnitTypeName: '',
      addDialogFormVisible: false,
      addataForm: {
        //当前被呼叫电话号码,
        calledPhoneNumber: '',
        //当前正在通话的卡号
        cardNumber: '',
        //负责人电话
        contactNumber: '',
        //赠送时间
        givingMinutes: '',
        //名称
        name: '',
        //负责人
        personInCharge: '',
        //安装位置
        position: '',
        //sip账户
        sipName: '',
        //sip密码器
        sipPwd: '',
        //当前开始通话时间
        startTime: '',
        //设备唯一编号
        terminalCode: ''
      },
      //编辑用户设备
      eidtDialogFormVisible: false,
      eidtForm: {
        //当前被呼叫电话号码,
        calledPhoneNumber: '',
        //当前正在通话的卡号
        cardNumber: '',
        //负责人电话
        contactNumber: '',
        //赠送时间
        givingMinutes: '',
        //名称
        name: '',
        //负责人
        personInCharge: '',
        //安装位置
        position: '',
        //sip账户
        sipName: '',
        //sip密码器
        sipPwd: '',
        //当前开始通话时间
        startTime: '',
        //设备唯一编号
        terminalCode: '',
        //
        isGiving: '',
        //
        terminalGuid: '',
        //
        unitGuid: ''
      },
      //规则
      myrules: {
        terminalCode: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        calledPhoneNumber: [
          {
            required: true,
            message: '请输入当前被呼叫电话号码',
            trigger: 'blur'
          }
        ],
        cardNumber: [
          { required: true, message: '请输入当前正在通话卡号', trigger: 'blur' }
        ],
        givingMinutes: [
          { required: true, message: '请输入赠送时间', trigger: 'blur' }
        ],
        personInCharge: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        position: [
          { required: true, message: '请输入安装位置', trigger: 'blur' }
        ],
        sipName: [
          { required: true, message: '请输入sip账号', trigger: 'blur' }
        ],
        sipPwd: [{ required: true, message: '请输入sip密码', trigger: 'blur' }],
        contactNumber: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.UnitTypeName = this.getUnitTypeName(this.$store.state.user.unitType)
    console.log(this.UnitTypeName)
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    tosearch() {
      this.pageNum = 1
      this.searchInfo = {}
      if (this.sbnumber !== null && this.sbnumber !== '') {
        this.searchInfo.sbnumber = this.sbnumber
      }
      this.searchInfo.unitGuid = this.changeschoolid
      // if(this.UnitTypeName=='学校用户'){
      //     this.searchInfo.agentGuid=this.Guid
      // }
      this.informationint()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.informationint()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.informationint()
    },
    //设备信息
    informationint(val) {
      this.searchInfo.unitGuid = this.changeschoolid
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/voip/terminal/search-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode === 200) {
          if (val != 1) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
          }
          this.tableinformation = data.messageContent.data
          this.pageCount = data.messageContent.pageCount
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.dataListLoading = false
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleAddclick() {
      this.addDialogFormVisible = true
    },
    closeDialog(done) {
      this.$refs['addRef'].resetFields()
      done()
    },
    addvisible() {
      this.addDialogFormVisible = false
      this.$refs['addRef'].resetFields()
    },
    addataFormSubmit() {
      this.addataForm.unitGuid = this.changeschoolid
      this.$refs.addRef.validate(isPass => {
        if (isPass) {
          this.$http({
            url: this.$http.adornUrl('/voip/terminal/add-terminal'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: this.addataForm,
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode === 200) {
              this.$message({
                message: '添加用户设备成功',
                type: 'success'
              })
              this.informationint(1)
              this.addDialogFormVisible = false
              this.$refs['addRef'].resetFields()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        }
      })
    },
    eidtvisible() {
      this.eidtDialogFormVisible = false
    },
    eidtcloseDialog(done) {
      done()
    },
    showEditUserForm(row) {
      for (var key in this.eidtForm) {
        for (var key2 in row) {
          if (key == key2) {
            this.eidtForm[key] = row[key2]
          }
        }
      }
      this.eidtDialogFormVisible = true
    },
    //确定编辑
    eidtFormSubmit() {
      this.$http({
        url: this.$http.adornUrl('/voip/terminal/update-terminal'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.eidtForm,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.eidtDialogFormVisible = false
          this.informationint(1)
        } else {
          this.$message.error('编辑错误')
        }
      })
    },
    //删除设备
    deleteUser(row) {
      this.$confirm('此操作将永久删除此设备!', '提示', {
        cancelButtonClass: 'cancelButton',
        confirmButtonClass: 'confirmButton',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.terminalGuid = row.terminalGuid
          this.$http({
            url: this.$http.adornUrl('/voip/terminal/delete-terminal'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: this.terminalGuid,
              messageType: this.messageType
            })
          }).then(({ data }) => {
            // console.log(data)
            if (data.messageCode === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.informationint(1)
            } else {
              this.$message.error('删除失败')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.Phone_list {
  .addsb /deep/ .el-dialog--center .el-dialog__body {
    padding-left: 77px;
  }
  padding: 20px;
  .header_title {
    text-indent: 22px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e5e9f2;
    color: #909399;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    height: 50px;
    width: 1234px;
    display: flex;
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 330px;
    }
  }
  .demo-form-inline1 {
    border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>